<template>
    <div class="client-list" v-loading="loading">
        <div class="input-box">
            <el-input
                placeholder="请输入您要搜索的内容"
                clearable
                @keyup.enter.native="getList(1)"
                style="width:200px;"
                v-model.trim="keyword">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="primary" class="btn" @click="getList(1)">搜索</el-button>
        </div>
        <div class="table-box">
            <el-table
                :data="tableData"
                :span-method="arraySpanMethod"
                border
                style="width: 100%">
                <el-table-column
                    width="80"
                    label="id">
                    <template slot-scope="scope">
                        <div class="item-td" @click="test(scope)">{{scope.row.admoreUserInfoVo.id}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="公司全称">
                    <template slot-scope="scope">
                        <div class="item-td">{{scope.row.admoreUserInfoVo.companyFullName}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="150"
                    label="公司简称">
                    <template slot-scope="scope">
                        <div class="item-td">{{scope.row.admoreUserInfoVo.companyShortName}}</div>
                    </template>
                </el-table-column>

                <el-table-column
                    width="100"
                    label="代理/直投">
                    <template slot-scope="scope">
                        <div class="item-td" v-if="scope.row.admoreUserInfoVo.putType === 1">直投</div>
                        <div class="item-td" v-else>代理</div>
                    </template>
                </el-table-column>

                <el-table-column
                    width="120"
                    label="投放游戏">
                    <template slot-scope="scope">
                        <template v-if="scope.row.putGameInfoVoList && scope.row.putGameInfoVoList.length">
                            <div class="for-items" v-for="(item, index) in scope.row.putGameInfoVoList" :key="index">
                                <div class="items-column" style="width:120px;">{{item.gameName || '-'}}</div>
                                <div class="items-column" style="flex:1">
                                    <div>
                                        <div>
                                            <b style="margin-right:5px;">联系人：</b>
                                            <span>{{item.user}}</span>
                                        </div>
                                        <div>
                                            <b style="margin-right:5px;">手机号：</b>
                                            <span>{{item.phone}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="item-td">
                                -
                            </div>
                        </template>
                    </template>
                </el-table-column>

                <el-table-column
                    label="对接人&联系方式">
                </el-table-column>

                <el-table-column
                    width="100"
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <div class="item-td">
                            <div><el-button @click="goClientDetail(scope.row.admoreUserInfoVo.id)" type="text" size="small">查看详情</el-button></div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            keyword: '',
            tableData: [
            ],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            loading: false
        }
    },
    created () {
        this.getList(1)
    },
    methods: {
        // 获取点评列表
        async getList (pageNum) {
            if (this.loading) return
            this.loading = true
            this.pageNum = pageNum
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }

            if (this.keyword) {
                params.keyword = this.keyword
            }
            let res = await this.$http.get('/order/selectAdmoreUserInfo', {
                params
            })
            if (res.code === '0') {
                this.tableData = res.data
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },

        // 页容切换
        sizeChange (num) {
            this.pageSize = num
            this.getList(1)
        },

        // 页码切换
        pageChange (num) {
            this.pageNum = num
            this.getList(this.pageNum)
        },

        // 查看视频详情
        goClientDetail (id) {
            this.$router.push({
                path: '/business/clientDetail',
                query: {
                    id
                }
            })
        },

        // 合并单元格
        arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 4) {
                return [1, 2]
            } else if (columnIndex === 5) {
                return [0, 0]
            }
        }
    }

}
</script>

<style lang="scss" scoped>
    .client-list {
        .input-box {
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin: 20px 0;

            /deep/ td {
                padding: 0;
                .cell {
                    padding: 0;
                }
            }
            .item-td {
                padding: 12px 10px;
            }

            .for-items {
                display: flex;
                border-bottom: 1px solid #EBEEF5;
                &:last-child {
                    border: none;
                }
                .items-column {
                    padding: 12px 10px;
                    display: flex;
                    align-items: center;
                    border-right: 1px solid #EBEEF5;
                    &:last-child {
                        border: none;
                    }
                }
            }
        }
        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
